<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账号登录</title>
    <style>
        div {
            display: flex;
            align-items: center;
        }

        div>p {
            width: 100px;
        }

        div>input {
            height: 30px;
        }
    </style>
</head>

<body>
    <div id="box">
        <p>手机号：</p><input type="text" name="" id="telephone" maxlength="11">
        <p id="one"></p>
    </div>
    <div id="box_two">
        <p>验证码：</p><input type="text" name="" id="verify" maxlength="6">
        <p id="two"></p>
    </div>
    <div id="box_three">
        <p>密码：</p><input type="password" name="" id="password" maxlength="11">
        <p id="three"></p>
    </div>
    <div id="box_box">
        <p>确认密码：</p><input type="password" name="" id="again" maxlength="11">
        <p id="box_one"></p>
    </div>
    <input type="submit" name="" id="submit">
    <script>
        telephone.onblur = function () {
            let reg = /^[1][3-9][0-9]{9}$/;
            let x = telephone.value
            console.log(reg.test(x));
            if (reg.test(x)) {
                one.innerText = '通过'
            } else {
                one.innerText = '不通过'
            }
        }
        verify.onblur = function () {
            let reg = /^[A-Za-z0-9]{6}$/;
            let x = verify.value
            if (reg.test(x)) {
                two.innerText = '通过'
            } else {
                two.innerText = '不通过'
            }
        }
        password.onblur = function () {
            let reg = /^[A-Za-z0-9]{11}$/;
            let word = password.value;
            if (reg.test(word)) {
                three.innerText = '通过'
            } else {
                three.innerText = '不通过'
            }
            again.onblur = function () {
                let pass = again.value;
                console.log(pass, word);
                if (pass == word) {
                    box_one.innerText = '通过';
                } else {
                    box_one.innerText = '不通过'
                }
            }
        }
        submit.onclick = function () {
            console.log(one.innerText.length, two.innerText.length, three.innerText.length, box_one.innerText
                .length);
            if (one.innerText.length == 2 && two.innerText.length == 2 && three.innerText.length == 2 && box_one.innerText.length == 2) {
                alert('提交成功');
                // one.innerText.length = 0;
                // two.innerText.length = 0;
                // three.innerText.length = 0;
                // box_one.innerText.length = 0
            } else {
                alert('提交失败');
                // one.innerText.length = 0;
                // two.innerText.length = 0;
                // three.innerText.length = 0;
                // box_one.innerText.length = 0

            }
        }
    </script>
</body>

</html>